import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd'
import StockOfFabric from './components/StockOfFabric'
import StockOfSupplier from './components/StockOfSupplier'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAppSelector } from '@/store/hooks'
const Index: React.FC = () => {
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const [menuItems, setmenuItems] = useState<{ key: string; label: string; children: React.ReactNode }[]>([])
  const [defaultKey, setdefaultKey] = useState('')
  const [query] = useSearchParams()
  const navigate = useNavigate()
  useEffect(() => {
    const items: { key: string; label: string; children: React.ReactNode }[] = []
    if (buttonCodeList.includes('StockOfFabric')) {
      items.push({
        key: 'fabric',
        label: '面料厂维度',
        children: <StockOfFabric />,
      })
      setdefaultKey('fabric')
    }
    if (buttonCodeList.includes('StockOfSupplier')) {
      items.length === 0 && setdefaultKey('supplier')
      items.push({
        key: 'supplier',
        label: '制衣厂维度',
        children: <StockOfSupplier />,
      })
    }
    if (items.length === 0) {
      navigate('/403', { replace: true })
      return
    }
    setmenuItems(items)
    const type = query.get('type') || ''
    if (type) {
      setdefaultKey(type)
    }
  }, [])
  return <Tabs activeKey={defaultKey} items={menuItems} onChange={(key) => setdefaultKey(key)}></Tabs>
}

export default Index
